<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$theme['title']}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{$_G['URL']['YX2020_CSS']}css/reset.css">
    <link rel="stylesheet" type="text/css" href="{$_G['URL']['YX2020_CSS']}css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="{$_G['URL']['YX2020_CSS']}css/style_new.css?v=152">
    <link rel="stylesheet" type="text/css" href="{$_G['URL']['YX2020_CSS']}css/other_new.css?v=123">
    <link rel="stylesheet" type="text/css" href="{$_G['URL']['APP_CSS']}dsdialog.css">
    <script src="{$_G['URL']['YX2020_CSS']}js/jquery.js?v=2"></script>
    <script src="{$_G['URL']['YX2020_CSS']}js/jquery.SuperSlide.2.1.js?v=2"></script>
    <script src="{$_G['URL']['YX2020_CSS']}js/md5.js?v=2"></script>
    <script src="{$_G['URL']['YX2020_CSS']}js/swiper-3.4.2.min.js"></script>
    {if $config['weixinh5']==2}
    <script src="{$_G['URL']['YX2020_CSS']}js/vconsole.min.js"></script>
    <script> var vConsole = new VConsole(); </script>
    {/if}
    <script type="text/javascript" src="{$_G['URL']['PUBLIC_JS']}yx2020/ping.js?v=15"></script>
    <script type="text/javascript" src="{$_G['URL']['PUBLIC_JS']}yx2020/duihua.js?v=18"></script>
    <script type="text/javascript" src="{$_G['URL']['PUBLIC_JS']}yx2020/swiper_2022.js?v=2"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{$_G['URL']['PLUGIN_CSS']}shopplan/static/css/reset.css?v=1">
    <link rel="stylesheet" type="text/css" href="{$_G['URL']['PLUGIN_CSS']}shopplan/static/css/swiper.min.css?v=1">
    <link rel="stylesheet" type="text/css" href="{$_G['URL']['PLUGIN_CSS']}shopplan/static/css/style.css?v=12">
    <link rel="stylesheet" type="text/css" href="{$_G['URL']['LOTTERY_CSS']}lottery/css/reset.css">
    <link rel="stylesheet" type="text/css" href="{$_G['URL']['LOTTERY_CSS']}lottery/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="{$_G['URL']['LOTTERY_CSS']}lottery/css/style.css?v=11">

    <script src="{$_G['URL']['LOTTERY_CSS']}lottery/js/layer/layer.js"></script>

    <link rel="stylesheet" href="{$_G['URL']['FCWORK_CSS']}dist/mescroll.min.css">
    <script src="{$_G['URL']['FCWORK_CSS']}dist/mescroll.min.js" charset="utf-8"></script>
</head>
<style>
    .fixBottom{
        z-index: 2;
    }
    .strategy .statTxt{
        width: 3.83rem !important;
    }
    .timeEnd12{
        padding-top: .16rem !important;
    }
    .myWinner .timeEnd12{
        padding: 0 0.16rem!important;
        margin-top: 0.2rem;
    }
    .winerChosen{
        padding: 0 0.43rem 0 0.34rem;
    }
    .dataBox{
        padding: 0;
        overflow: hidden;
    }
    .strategy li{
        margin: 0 0.26rem;
    }
    .strategy .f_list{
        background: #ffdaa2;
        padding: 0.2rem 0.5rem 0.14rem 0.1rem;
        margin: .2rem 0.26rem .2rem 0.9rem;
        /* margin: 0 0 0.2rem; */
        border-radius: 0.1rem;
        position: relative;
        height: 0.8rem;
        overflow: visible;
    }
    .strategy .f_list::after{
        content: "";
        display: block;
        clear: both;
        border: 0.2rem solid transparent;
        border-bottom-color: #ffdaa2;
        width: 0;
        height: 0;
        position: absolute;
        top: -0.3rem;
        left: 0.5rem;
    }
    .strategy .f_list:not(.li_np)>div,.strategy .f_list.li_np>div>div{
        height: 0.8rem;
        overflow: hidden;
        display: flex;
        justify-content: space-evenly;
    }
    .strategy .f_list.li_np{
        padding-right: 0.5rem;
    }
    .strategy .f_list>a,.strategy .f_list.li_np>div>a{
        background: #c98e4b;
        color: #ffdaa2;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 0.5rem;
        text-align: center;
        line-height: 0.5rem;
        writing-mode: vertical-lr;
        writing-mode: tb-lr;
        border-radius: 0 0.1rem 0.1rem 0;
    }
    .strategy .f_list .f_list_item{
        margin-right: 0.1rem;
        float: left;
        margin-bottom: 0.2rem;
    }
    .strategy .f_list.li_np .f_list_item .f_list_img_wrap{

        width: 0.72rem;
        height: 0.72rem;
    }
    .strategy .f_list .f_list_item .f_list_img_wrap{
        width: 0.76rem;
        height: 0.76rem;
        border-radius: 0.41rem;
        position: relative;

    }
    .strategy .f_list.li_np .f_list_item .f_list_img_wrap span{

        width: 0.68rem;
        height: 0.68rem;
    }
    .strategy .f_list .f_list_item .f_list_img_wrap span{
        line-height: 0.76rem;
        width: 0.72rem;
        height: 0.72rem;
        text-align: center;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        border: 0.02rem solid #c98e4b;
        border-radius: 0.41rem;
        color: #c98e4b;
    }
    .strategy .f_list .f_list_item>span{
        display: block;
        color: #c98e4b;
        text-align: center;
        margin-top: 0.1rem;
        font-size: 0.2rem;
    }
    .strategy .f_list.li_np .f_list_item .f_list_img_wrap img{
        width: 0.72rem;
        height: 0.72rem;
    }
    .strategy .f_list .f_list_item .f_list_img_wrap img{
        width: 0.76rem;
        height: 0.76rem;
        border-radius: 0.41rem;
    }
    .strategy .f_list .f_list_item .f_list_img_wrap img[src=""],.strategy .f_list .f_list_item .f_list_img_wrap img:not([src]){
        opacity:0;
    }
    .redbagTxt p{
        text-shadow: 0.04rem 0.06rem 0.07rem #ff6a69;
    }
    .redBag a.getBag{
        transform: none;
        position: static;
        height: 0.44rem;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: normal;
        margin: 0.1rem auto 0;
    }
    .redBag .redbagBtn{
        position: absolute;
        top: 0.26rem;
        /*bottom: 0.34rem;*/
        right: 0.24rem;
        text-align: center;
    }
    .redBag .redbagBtn span{
        transform: none;
        color: rgba(255,255,255,0.63);
        text-align: center;
        font-weight: bold;
    }
    .myGift{
        padding-top: 1.5rem;
    }
    .myGift div:first-child{
        margin-bottom: 0.12rem;
        font-weight: bold;
        font-size: 0.3rem;
    }
    .ticketBox .convert_code img{
        width: 100%!important;
        height: 100%!important;
    }
    .ticeketList ul {
        /*max-height: 7.3rem;*/
    }
    .yx_peopleList li{
        padding-left: 0.3rem;
        padding-right: 0.3rem;
    }
    .gameControl a{
        background: #930000 url(https://css2020.yixuan.net/2020css/plugin/lottery/images/btn3.png) center no-repeat;
        border-radius: 0.26rem;
        background-size: 100% auto;
    }
    .myWinner .yx_choseBar.yx_peopleList{
        position: absolute;
        bottom: 0;
        top: 2.29rem;
        left:0.34rem;
        right:0.43rem;
    }
    .myWinner .ticeketList{
        position: absolute;
        top: 0;
        bottom: 0;
        display: flex;
        left:0;
        right:0;
        flex-direction: column;
    }
    .redBag{
        overflow: visible;
    }


    .redWrap{
        z-index: 1;
        background: url(https://dpy01cdn.yixuan.net/images/2/2021/08/vxTXaa2rwtBATA2LlJXVjIXXMbaJ5p.png) no-repeat -0.08rem top;
        background-size: 100% auto;
        position: relative;
    }
    .redWrap .h{
        color: #a66e4d;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 0.4rem;
    }
    .redWrap .h div{
        position: relative;
    }
    .redWrap .h text{
        width: 0.11rem;
        height: 0.11rem;
        border-radius: 0.11rem;
        border: 0.01rem solid #a66e4d;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .redWrap .h text.l{
        left: -0.3rem;
    }
    .redWrap .h text.r{
        right: -0.3rem;
    }
    .redWrap .h text::after{
        content: "";
        display: block;
        width: 0.05rem;
        height: 0.05rem;
        border-radius: 0.05rem;
        background: #a66e4d;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .redWrap .btn{
        background: url(https://dpy01cdn.yixuan.net/images/2/2021/08/O1s6QWtmD6ddQwytdsLyL2ytR9S2yE.png) no-repeat center;
        width: 2.48rem;
        height: 0.64rem;
        background-size: 100% 100%;
        margin: 0 auto;
        color: #cd4e42;
        line-height: 0.64rem;
        text-align: center;
        position: absolute;
        bottom: 0.8rem;
        left: 0;
        right: 0;
    }
    .redWrap .price{
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin-top: 0.3rem;
    }
    .redWrap .price .num{
        font-size: 1rem;
        line-height: 2rem;
        font-weight: bold;
        color: #ee5f52;
        position: relative;
    }
    .redWrap .price .num::after{
        content: "";
        display: inline-block;
        width: 0.4rem;
    }
    .redWrap .price .num .flag{
        font-size: 0.3rem;
        width: 0.4rem;
        height: 0.4rem;
        line-height: 0.4rem;
        background: #ee5f52;
        color: #ffffff;
        position: absolute;
        bottom: 0.6rem;
        right: 0;
        border-radius: 0.4rem;
        text-align: center;
    }

    .redGetWrap{
        z-index: 1;
        background: url(https://dpy01cdn.yixuan.net/images/2/2021/08/RSQrw87Q4UE6cS41uR8cw6QW4YC8cs.png) no-repeat -0.16rem top;
        background-size: 100% auto;
        position: relative;
        color: #d1302d;
        overflow: hidden;
    }
    .redGetWrap .h{
        margin-top: 1.56rem;
        font-size: 0.40rem;
        text-align: center;
    }
    .redGetWrap .name{
        margin-top: 0.04rem;
        font-size: 0.30rem;
        text-align: center;
    }
    .redGetWrap .price{
        margin-top: 0.04rem;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    .redGetWrap .price .num{
        font-size: 1.10rem;
        line-height: 1.10rem;
        font-weight: bold;
        color: #ee5f52;
        position: relative;
    }
    .redGetWrap .price .num::after{
        content: "";
        display: inline-block;
        width: 0.40rem;
    }
    .redGetWrap .price .num .flag{
        font-size: 0.30rem;
        width: 0.40rem;
        height: 0.40rem;
        line-height: 0.40rem;
        background: #ee5f52;
        color: #ffffff;
        position: absolute;
        bottom: 0.16rem;
        right: 0;
        border-radius: 0.40rem;
        text-align: center;
    }
    .redGetWrap .btn{
        background: #fefaee;
        width: 2.48rem;
        height: 0.70rem;
        border-radius: 0.64rem;
        background-size: 100% 100%;
        margin: 0 auto;
        color: #cd4e42;
        line-height: 0.70rem;
        text-align: center;
        position: absolute;
        bottom: 1.80rem;
        left: 0;
        right: 0;
        font-size: 0.30rem;
    }
    .redGetWrap .anim_txt{
        color: rgba(255,255,255,0.8);
        text-align: center;
        position: absolute;
        bottom: 1.30rem;
        left: 0;
        right: 0;
        font-size: 0.2rem;
        animation: anim_txt 1s infinite;
    }
    .peoInfor{
        font-size: .25rem;
    }
    .peoName{
        width: 1.14rem;
    }
    .small_color{
        background-image:linear-gradient( to right ,rgba(255,119,55,0.37), rgba(249,156,68,0.37)) !important;
    }
    @keyframes anim_txt {
        0%{
            opacity: 0;
        }
        50%{
            opacity: 0;
        }
        51%{
            opacity: 1;
        }
        99%{
            opacity: 1;
        }
        100%{
            opacity: 0;
        }
    }
    .winTxt{
        max-width: 200px;
    }
    .orderList>div{
        overflow: visible;
    }
</style>
<style>
    .myWinner{
        bottom: 0 !important;
        top:0;
    }
    .winnerChose span{
        display: none;
    }
    .winnerChose .cur{
        display: block;
    }
    .winerAlt{
        top: 0;
    }
    .closeWiner{
        /*left: 3.5rem;*/
        top: .2rem;
    }
    .ticeketList ul{
        max-height: 8rem;
    }
    body{background: #e8e8e8}
</style>
<!--我的奖品弹出-->
<div id="mescroll" class="mescroll">
    <div id="app">
        <div class="yx_lt" id="yx_lt" style="background-color: gray">
            <div class="winerAlt" style="display: none;position: unset;left: 0;transform: none;height: 100vh;">
                <span class="closeWiner"></span>
                <div class="winBox">
                    <h4></h4>
                    <div class="top_div">
                        <div class="winImg">
                            <img class="convert_prize_img" src="">
                        </div>
                        <div class="winTxt">
                            <p class="convert_title">中奖啦，恭喜你抽中了</p>
                            <p class="convert_prize_name"></p>
                        </div>
                    </div>
                    <div class="ticketBox">
                        <p>兑奖凭证</p>
                        <span class="convert_code">
                <img src="" id="verif_img" style="width: 130px;height: 136px;">
            </span>
                    </div>
                    <div class="changeNotice">
                        <p class="convert_method"></p>
                        <p class="convert_people"></p>
                        <p class="convert_tel"></p>
                    </div>
                    <a  id="convert_btn_txt" class="changeBtn">{$_C['yx_lt_convert_btn']}</a>
                    <div class="changepoint" id="convert_btm_tips">{$_C['yx_lt_convert_btm_tips']}</div>
                </div>
            </div>
        </div>
    </div>
</div>

</html>
<script>
    const mescroll = new MeScroll("mescroll", {
        down: {
            auto: false,
            callback: () => {
                mescroll.endSuccess();
                setTimeout(() => {
                    window.location.reload();
                },500)
            }
        },
        up: {
            use: false
        }
    })
    $(document).ready(function () {
        convert();
    });

    $('.closeWiner').click(function(){
        convert();
    })
    //兑换
    function convert(e) {
        var postUrl = '/{php echo createMobileUrl("X_ltExample",array("themeid"=>$themeid,"from"=>"mobile"));}';
        $.ajax({
            type:'POST',
            dataType:'json',
            data:{},
            url:postUrl,
            success:function (res){
                var data = res.data;
                if (res.error) {
                    layer.msg(res.msg);
                } else {
                    $('#screen').fadeOut();
                    $('.myWinner').hide();

                    $(".convert_prize_img").attr("src", data.prize_img);
                    $(".convert_title").html(data.title);
                    $(".convert_prize_name").html(data.prize_name);
                    $("#verif_img").attr('src',data.convert_card);
                    $(".convert_method").html(data.method);
                    $(".convert_people").html(data.tel);
                    $(".convert_tel").html(data.mobile);
                    $("#convert_btn_txt").html(data.btn_txt);

                    // $("#convert_btn_txt").data("fid", item_fid);
                    $("#convert_btm_tips").html(data.btm_tips);
                    $("#convert_btm_tips2").html(data.btm_tips2);

                    $(".winerAlt").show();
                    $('#screen').fadeIn();
                    $('.winerAlt').animate({'bottom':0},500);
                }
            }
        });
    }
</script>
{include file='fcworker/fc_base_foot'}
